import "../result/index.scss";


function Events() {
    return (<>
        <div className="app-events">
            <div className="min-h-screen bg-gray-100 p-4">
                {/* 头部背景 */}
                <div className="relative bg-gradient-to-b from-black/70 to-transparent rounded-t-lg overflow-hidden">
                    <img
                        src="https://placehold.co/600x300/003366/ffffff?text=足球场"
                        alt="足球场"
                        className="w-full h-48 object-cover"
                    />
                    <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
                        <h1 className="text-xl font-bold">国际赛</h1>
                        <p className="text-sm mt-1">比赛时间：10-10</p>
                    </div>
                    <button className="absolute top-4 left-4 text-white text-xl">
                        ←
                    </button>
                </div>

                {/* 比分区域 */}
                <div className="flex justify-between items-center px-6 py-4 bg-white">
                    {/* 主队 */}
                    <div className="flex flex-col items-center flex-1">
                        <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-md mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
                                <path d="M2 12h20" />
                            </svg>
                        </div>
                        <div className="text-xs text-gray-500">主队</div>
                        <div className="font-bold text-lg">英格兰</div>
                    </div>

                    {/* 比分 */}
                    <div className="flex flex-col items-center">
                        <div className="bg-gray-200 px-3 py-1 rounded-full text-xs mb-2">完场</div>
                        <div className="text-3xl font-bold text-red-500">3:0</div>
                        <div className="text-xs text-gray-500">半(3:0)</div>
                    </div>

                    {/* 客队 */}
                    <div className="flex flex-col items-center flex-1">
                        <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-md mb-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
                                <path d="M2 12h20" />
                            </svg>
                        </div>
                        <div className="text-xs text-gray-500">客队</div>
                        <div className="font-bold text-lg">威尔士</div>
                    </div>
                </div>

                {/* 开奖结果标题 */}
                <div className="mt-6 px-4">
                    <h2 className="text-lg font-bold">开奖结果：</h2>
                </div>

                {/* 开奖结果表格 */}
                <div className="mt-4 bg-white rounded-lg shadow-md overflow-hidden">
                    <div className="grid grid-cols-3 border-b border-gray-200 bg-gray-50">
                        <div className="px-4 py-3 font-semibold text-center">游戏</div>
                        <div className="px-4 py-3 font-semibold text-center">开奖结果</div>
                        <div className="px-4 py-3 font-semibold text-center">奖金</div>
                    </div>

                    {/* 胜平负 */}
                    <div className="grid grid-cols-3 border-b border-gray-200">
                        <div className="px-4 py-3 text-center">胜平负</div>
                        <div className="px-4 py-3 text-center">
                            <span className="inline-block bg-red-500 text-white px-2 py-1 rounded text-sm font-medium">主胜</span>
                        </div>
                        <div className="px-4 py-3 text-center font-bold">1.14</div>
                    </div>

                    {/* 让球胜平负 */}
                    <div className="grid grid-cols-3 border-b border-gray-200">
                        <div className="px-4 py-3 text-center">让球胜平负</div>
                        <div className="px-4 py-3 text-center">
                            <span className="inline-block bg-red-500 text-white px-2 py-1 rounded text-sm font-medium">主胜(-2)</span>
                        </div>
                        <div className="px-4 py-3 text-center font-bold">2.80</div>
                    </div>

                    {/* 比分 */}
                    <div className="grid grid-cols-3 border-b border-gray-200">
                        <div className="px-4 py-3 text-center">比分</div>
                        <div className="px-4 py-3 text-center">
                            <span className="inline-block bg-red-500 text-white px-2 py-1 rounded text-sm font-medium">3:0</span>
                        </div>
                        <div className="px-4 py-3 text-center font-bold">6.50</div>
                    </div>

                    {/* 半全场 */}
                    <div className="grid grid-cols-3 border-b border-gray-200">
                        <div className="px-4 py-3 text-center">半全场</div>
                        <div className="px-4 py-3 text-center">
                            <span className="inline-block bg-red-500 text-white px-2 py-1 rounded text-sm font-medium">胜胜</span>
                        </div>
                        <div className="px-4 py-3 text-center font-bold">1.54</div>
                    </div>

                    {/* 总进球 */}
                    <div className="grid grid-cols-3">
                        <div className="px-4 py-3 text-center">总进球</div>
                        <div className="px-4 py-3 text-center">
                            <span className="inline-block bg-red-500 text-white px-2 py-1 rounded text-sm font-medium">3球</span>
                        </div>
                        <div className="px-4 py-3 text-center font-bold">3.60</div>
                    </div>
                </div>
            </div>
        </div>
    </>)
}


export default Events
